<template>
  <div>
    <Echart
      :options="options"
      height="400px"
      width="600px"
    />
  </div>
</template>

<script>
import Echart from '../../../common/echart'

export default {
  components: {
    Echart
  },
  // 这里是预留给你传数据的
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      options: {}
    }
  },
  watch: {
    cdata: {
      handler() {
        this.options = {
          backgroundColor: 'rgba(255,255,255,0)',
          tooltip: {
            formatter: '{a} <br/>{c} {b}'
          },
          series: [
            {
              name: '计划项目建成投产率',
              type: 'gauge',
              z: 3,
              min: 0,
              max: 100,
              splitNumber: 10,
              radius: '50%',
              axisLine: {
                // 坐标轴线
                lineStyle: {
                  // 属性lineStyle控制线条样式
                  width: 10
                }
              },
              axisTick: {
                // 坐标轴小标记
                length: 15, // 属性length控制线长
                lineStyle: {
                  // 属性lineStyle控制线条样式
                  color: 'auto'
                }
              },
              splitLine: {
                // 分隔线
                length: 20, // 属性length控制线长
                lineStyle: {
                  // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              title: {
                textStyle: {
                  // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  fontSize: 12,
                  fontStyle: 'italic'
                }
              },
              detail: {
                textStyle: {
                  // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              data: [{ value: 40, name: '' }]
            },
            {
              name: '',
              type: 'gauge',
              center: ['22%', '55%'], // 默认全局居中
              radius: '48%',
              endAngle: 45,
              splitNumber: 4,
              axisLine: {
                // 坐标轴线
                lineStyle: {
                  // 属性lineStyle控制线条样式
                  width: 8
                }
              },
              axisTick: {
                // 坐标轴小标记
                length: 12, // 属性length控制线长
                lineStyle: {
                  // 属性lineStyle控制线条样式
                  color: 'auto'
                }
              },
              splitLine: {
                // 分隔线
                length: 20, // 属性length控制线长
                lineStyle: {
                  // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer: {
                width: 5
              },
              detail: {
                textStyle: {
                  // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  fontSize: 16
                }
              },
              data: [{ value: 6458, name: '' }]
            },
            {
              name: '',
              type: 'gauge',
              center: ['79%', '55%'], // 默认全局居中
              radius: '48%',
              startAngle: 140,
              endAngle: -45,
              splitNumber: 4,
              axisLine: {
                // 坐标轴线
                lineStyle: {
                  // 属性lineStyle控制线条样式
                  width: 8
                }
              },
              axisTick: {
                // 坐标轴小标记
                length: 12, // 属性length控制线长
                lineStyle: {
                  // 属性lineStyle控制线条样式
                  color: 'auto'
                }
              },
              splitLine: {
                // 分隔线
                length: 20, // 属性length控制线长
                lineStyle: {
                  // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer: {
                width: 5
              },
              title: {
                offsetCenter: [0, 0] // x, y，单位px
              },
              detail: {
                textStyle: {
                  // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  fontSize: 16
                }
              },
              data: [{ value: 2583, name: '' }]
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
